/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast, Loading, Modal, ActionSheet } from '../../../library/func';
import Icon from '../../../project/style/icon';
import Http from '../../../project/func/http/http'

// 引入自定义组件
import proj_Order_List from '../../../project/comp/orderList/proj_Order_List'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class OrderList extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			// 订单状态
			orderStatus:[
				{name:'全部',type:'全部'},
                {name:'未付款',type:'待付款'},
                {name:'未发货',type:'待发货'},
                {name:'已发货',type:'待收货'},
                {name:'已完成',type:'待评价'},
			],
			// 当前订单状态
			status:'全部',
			// 各状态下订单列表
			order:[],
			// 用户订单列表
			list:[]
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {

		console.log(this.$router.params.status)

		// 各状态进来直接定位到各状态栏
		this.setState({
			status: this.$router.params.status
		})

		this.getList(this.$router.params.status);

	}
	// didshow
	componentDidShow() {

	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
    }
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
	}


	//获取列表  根据状态
	getList = (status) =>{
		Http.Loading({
			url:'order/list.php',
			data:{
				status:status
			},
			success:(data) => {
				this.setState({
					list: data,
					order: data
				})
			}
		})
	}

	// tab切换
	tab = (status, e) => {
		// console.log(status)
		this.setState({
			status: status
		})
		if(status == "全部"){
			this.getList('');
		}else{
			this.getList(status);
		}
	}

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '订单列表',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		// console.log('render============================',this.state.order)
		return (
			<CPage>
				<CContent mt='100'>
				
					{/* 用户订单列表 */}
					<proj_Order_List data={this.state.order} ></proj_Order_List>

				</CContent>

				{/* header订单状态 */}
				<CHeader bg='#fff'>
					<CRow>
						{this.state.orderStatus.map(item => {
							return (
								<CAround>
									<CHand h='100' y='center' size='30' class={this.state.status == item.name ? 'orderActive' : ''} onClick={this.tab.bind(this, item.name)}>{item.type}</CHand>
								</CAround>
							)
						})}
					</CRow>
				</CHeader>
				
			</CPage>
		)
	}
}


